$(function() {

	let hideInput = {
		data: function() {
			return {
				content: ''
			}
		},
		props: ['name', 'type'],
		template: `
			<div class="input" :class='name'>
				<slot></slot>
				<input @keydown.enter='go' @keydown.tab.prevent='fn' @blur='$emit("input-blur", content)' v-model.lazy='content' :type="type" :name="name" :id="name" autocomplete="off">
				<span class="span"></span>
			</div>
		`,
		methods:{
			fn: function(e){
				if($(e.target).parent().next('.input').length != 0 ){
					$(e.target).blur().parent().next().children('h5').click()
				}else{
					$(e.target).blur().parent().prev().children('h5').click()
				}
				// console.log(1)
			},
			go: function(e){
				$(e.target).blur().parent().next('button').click()
			}
		}
	}

	// 登录功能
	Vue.component('user-login', {
		data: function() {
			return {
				user: '',
				pass: '',
				passtwo: '',
				name: 'username',
				text: 'text',
				pwd: 'password',
				regname: 'regusername',
				regpwd: 'regpassword',
				pwdtwo: 'okpassword',
			}
		},
		props: ['species', 'box'],
		template: `
		<div :class="box">
			<div @click.self='cut' :class="species == 'login'? 'switch_button': 'switch_btn'">{{species == 'login'? '+' : '×'}}</div>
			<div class="title"><slot></slot></div>
			<form :class="species" :id="species" v-if='species == "login"'>
				<hide-input @input-blur='verifyUser($event)' :name='name' :type='text'>
					<h5 class="user">用户名</h5>
				</hide-input>
				
				<hide-input @input-blur='verifyPass($event)' :name='pwd' :type='pwd'>
					<h5 class="pwd">密码</h5>
				</hide-input>
				
				<button class="btn" @click.prevent='login'>登录</button>
				<div class="forgetpwd">忘记密码?</div>
			</form>
			
			<form :class="species" :id="species" v-else>
				<hide-input :name='regname' :type='text' @input-blur='verifyUser($event)'>
					<h5 class="regUser">用户名</h5>
				</hide-input>
				
				<hide-input :name='regpwd' :type='pwd' @input-blur='verifyPass($event)'>
					<h5 class="regPwd">密码</h5>
				</hide-input>
				
				<hide-input :name='pwdtwo' :type='pwd' @input-blur='regPass($event)'>
					<h5 class="pwdAgain">确认密码</h5>
				</hide-input>
				<button class="register" id="register" @click.prevent='reg'>注册</button>
			</form>
		</div>
		`,
		components: {
			'hide-input': hideInput
		},
		methods: {
			verifyUser: function(value) {
				this.user = value
				verifyOut(this)
			},
			verifyPass: function(value) {
				this.pass = value
			},
			regPass: function(value) {
				this.passtwo = value
			},
			login: function() {
				loginOut(this)
			},
			reg: function() {
				regOut(this)
			},
			cut: function(e) {
				cutOut(this,e)
				// console.log(e.target)
				// console.log(this)
			}
		}
	})

	// 必须写在组件后面
	let container = new Vue({
		el: '#container',
	})
	
	function cutOut(obj,e){
		if (obj.species == 'login') {
			$(e.target).stop().animate({
				right: '50%',
				top: '50%'
			}, 400, 'linear').animate({
				width: 450,
				height: 500,
				lineHeight: 500,
				borderRadius: '5%',
			}, 300, 'linear').animate({
				width: 500,
				height: 580,
				borderRadius: 10,
				// right:0,
				// top:50%,
				lineHeight: 580
			}, 200, 'linear', function() {
				$('.redBox').css('display', 'block');
				$('.switch_btn').animate({
					right: 75,
					top: '15%',
				})
			})
		} else {
			$(e.target).animate({
				right: '50%',
				top: "50%"
			}, 500, function() {
				$('.redBox').css('display', 'none');
				$('.switch_button').animate({
					width: 150,
					height: 150,
					borderRadius: "50%",
					right: '50%',
					top: '50%',
					lineHeight: 150
				}, 500, function() {
					$('.switch_button').delay(100).animate({
						right: 0,
						top: '20%',
					})
				});
			})
		}
	}

	function verifyOut(obj) {
		if (!obj.user) return
		// console.log(obj.user)
		$.ajax({
			type: 'post',
			url: 'http://misssj.cn:3001/login',
			data: {
				user: obj.user,
				pass: obj.pass
			},
			success: function(data) {
				// console.log(data);
				if (data != 'no') {
					// console.log(obj.species)
					if (obj.species != 'login') layer.msg('账号已经存在', {icon: 3})
					else layer.msg('账号找到了', {
						icon: 1
					})
				} else {
					if (obj.species != 'login') layer.msg('账号可以使用', {
						icon: 1
					})
					else layer.msg('账号没有找到', {icon: 5})

				}
			}
		})
	}

	function loginOut(obj) {
		if (!obj.user) {
			layer.msg('请输入用户名', {icon: 0})
			return
		}
		if (!obj.pass) {
			layer.msg('请输入密码', {icon: 0})
			return
		}
		$.ajax({
			type: 'post',
			url: 'http://misssj.cn:3001/login',
			data: {
				user: obj.user,
				pass: obj.pass
			},
			success: function(data) {
				// console.log(data);
				if (data && data != 'no') {
					// location.replace('/')
					layer.msg('登录成功', {icon: 1})
					localStorage.userId = data
					location.replace('userSystem.html')
				} else if (data == 'no') {
					layer.msg('账号没有找到', {icon: 5})
				} else if (data == false) {
					layer.msg('密码验证错误', {icon: 5})
				}
			}
		})
	}

	function regOut(obj) {
		// console.log(obj.pwd,obj.pwdtwo)
		if (obj.pass != obj.passtwo) {
			layer.msg('两次密码不一样，请重新输入', {icon: 5})
			return
		}

		$.ajax({
			type: 'post',
			url: 'http://misssj.cn:3001/register',
			data: {
				user: obj.user,
				pass: obj.pass
			},
			success: function(data) {
				layer.msg(data, {icon: 1})
			}
		})
	}

	$.prototype.showInput = function() {
		this.flag = true
		this.on('click', () => {
			if (!this.flag) return
			this.flag = false

			this.stop().animate({
				fontSize: 18
			}, 600).next().focus().stop().animate({
				height: 40
			}, 400, () => {
				this.next().next().stop().animate({
					width: '100%'
				}, 200, () => {
					this.flag = true
				})
				
			})
		})

		this.siblings('input').on('blur', () => {
			if (this.siblings('input').val().trim()) return

			this.stop().animate({
				fontSize: 28
			}, 600, () => {
				this.flag = true
			}).next().stop().animate({
				height: 0
			}, 400).next().stop().animate({
				width: 0
			}, 200)

		})
	}

	$('.user').showInput()

	$('.pwd').showInput()

	$('.regUser').showInput()

	$('.regPwd').showInput()

	$('.pwdAgain').showInput()

})
